<template>
	<view>
		<view>
			<table-title content="物品放行申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<!-- <view-item name="申请人" :value="userMsg.userName"></view-item> -->
				<!-- <view-item name="手机号码" :value="userMsg.userPhone"></view-item> -->
				<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor"></view-item>
				<view-item name="房间号" :value="userMsg.userRoom" :isLast="true"></view-item>
				<!-- <view-item name="单元" :value="userMsg.userRoom" :isLast="true"></view-item> -->
			</view>
			<small-title content="公司盖章"></small-title>
			<image class="pay-image" :src="signImgThumb" mode="scaleToFill" @tap='chooseImage'></image>
			<small-title content="物品列表"></small-title>
			<view style="margin-left: 20rpx;margin-right: 20rpx;">
				<uni-table :newMinWidth="0" border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
				    <uni-tr>
						<uni-th style="width: 50rpx;" align="center">序号</uni-th>
				        <uni-th style="width: 50rpx;" align="center">物品名称</uni-th>
				        <uni-th style="width: 50rpx;" align="center">数量</uni-th>
				        <uni-th style="width: 50rpx;" align="center">单位</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item,index) in goodList" :key="index">
				        <uni-td align="center">
							<view style="width: 60rpx;">{{index + 1}}</view>
						</uni-td>
				        <uni-td>
							<view style="width: 280rpx;">
								<input :disabled="true" type="text" v-model="item.goodsName" placeholder="请输入物品名称" />
							</view>
						</uni-td>
				        <uni-td>
							<view style="width: 100rpx;">
								<input :disabled="true" type="number" v-model="item.amount" placeholder="请输入" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 100rpx;">
								<input :disabled="true" type="text" v-model="item.unit" />
							</view>
						</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
<!-- 			<goods-table number="序号" goodsName="物品名称" amount="数量" unit="备注"></goods-table>
			<goods-table v-if="status!==-1" v-for="(item,index) in goodList" :goodsName="item.goodsName" :key="index"
				:unit="item.unit" :amount="item.amount" :number="(index+1).toString()" 
				:isLast="(index+1)===goodList.length?true:false"></goods-table> -->
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="userRightDetail.goodsRelease.right && status===0" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="verifyOrder(0)">审核通过</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回申请</button>
				</view>
			</view>
			<view v-if="userRightDetail.goodsRelease.right && status===1" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmDelivery" >确认已派送</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				userRightDetail:'',
				recordId: -1,
				processNo:'待分配',
				status:-1,
				state: '已受理',
				nopassReasons:'楼层管家已审核待放行物品',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				signImg:'',
				signImgThumb:'',
				goodList:[],
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
				authTypeDetail:{"operLeader":true,
				                "operMem":true,
								"businessLeader":true,
								"businessMem":true,
								"financeLeader":true,
				                "financeMem":true,
								"engineerLeader":true,
								"engineerMem":true,
								"mappingLeader":true,
								"mappingMem":true,
								"contractLeader":true,
								"contractMem":true,
								"director":true,
				},
				previewUrl:ONLINE_SERVER_ADDRESS_BASE_2 + '/file/preview/',
			}
		},
		methods: {
			chooseImage(){
				uni.previewImage({
					current: 0,
					urls: [this.signImg]
				})
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						this.nopassReasons = "运营主管已驳回，原因：" + value
					}else{
						this.nopassReasons = "楼层管家已驳回，原因：" + value
					}
					this.verifyOrder(1)
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},

			confirmDelivery(){
				console.log("[info]","楼层管家已派送：" + this.recordId)
				
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					this.nopassReasons = "运营主管已派送放行条"
				}else{
					this.nopassReasons = "楼层管家已派送放行条"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/goods-release/confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("物品放行办结成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("物品放行办结调用失败")
					}
				})
			},
			verifyOrder(status){
				console.log("[info]","运营专员审核：" + this.recordId)
				if(status != 1){
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						this.nopassReasons = "运营主管已审核通过"
					}else{
						this.nopassReasons = "楼层管家已审核通过"
					}
				}

				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/goods-release/verify/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						nopassReasons:this.nopassReasons,
						verifyResult:status,
						commentMsg: this.nopassReasons,                      //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("物品放行办结成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("物品放行办结调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("goods-release/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						 	 case 0:
						 		this.state = "待管家审核"
						 		break;
						 	 case 1:
						 		this.state = "待管家派送"
						 		break;
						 	 case 2:
						 		this.state = "待用户确认"
						 		break;
						 	 case 3:
						 		this.state = "已办结"
						 		break;
						 	 case 4:
						 		this.state = "待用户申请"
						 		break;
						 	 default:
						 		this.state = "全部"
						 } 
						 this.userMsg.userCompany = res.data.data.createUserInfo.name
						 this.userMsg.userBuilding = res.data.data.createUserInfo.title
						 this.userMsg.userFloor = res.data.data.createUserInfo.floor
						 this.userMsg.userRoom = res.data.data.createUserInfo.houseNumber
						 this.signImg = this.previewUrl + res.data.data.createUserInfo.selfSignFile
						 this.signImgThumb = this.signImg.replace('preview','thumbnail-preview')
						 this.goodList = JSON.parse(res.data.data.goodsDetail)
						 this.processNo = res.data.data.processNo
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			if(uni.getStorageSync('userinfo') != null){
				this.userRightDetail = uni.getStorageSync("userRight")
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			this.getOrder()
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.pay-image{
		border:2rpx solid;
		border-radius: 2px;
		margin: 20rpx 0 20rpx 50rpx;
		width: 196rpx;
		height: 196rpx;
	}
</style>
